<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta name="description" content="登录">
    <meta name="keywords" content="登录">
    <title>登录</title>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/modal.css">
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="stars"></div>
        <div class="form-container">
            <h1>登录</h1>
            <form id="myForm">
                <label>
                    <input type="text" placeholder="Account" id="account" required autocomplete="off">
                    <input type="password" placeholder="Password"  id="password" required autocomplete="off">
                    <input type="text"  placeholder="Code" id="code" style="width: 200px;" required autocomplete="off">
                    <canvas id="canvas" width="120" height="40"></canvas>
                </label>
                <div class="checkbox-group">
                    <input type="checkbox" id="remember-password" name="remember-password" />
                    <label for="remember-password">记住密码</label>
                </div>
                <button id="submit" type="submit">登录</button>
            </form>
            <a href="#" class="forgot-password" onclick="openModal()">忘记密码？</a>
            <div class="top-right">
                <a href="register.html">Sign Up</a>
            </div>
        </div>
    </div>
    <div class="infoModal" id="infoModal">
        <div class="infoModalContent">
            <p id="infoTitle"></p>
            <button id="confirmBtn">确定</button>
        </div>
    </div>
    <div class="overlay" id="overlay" onclick="closeModal()"></div>
    <div class="containerM" id="modal">
        <h2>忘记密码</h2>
        <div class="form-group">
            <label for="current-password">原密码</label>
            <input type="password" id="current-password">
        </div>
        <div class="form-group">
            <label for="new-password">新密码</label>
            <input type="password" id="new-password" required>
        </div>
        <div class="form-group">
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" required>
        </div>
        <button onclick="submitForm()">提交</button>
    </div>
    <script src="./js/login.js"></script>
    <script src="./js/canvas.js"></script>
    <script src="./js/modal.js"></script>
</body>
</html>